<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姚德秋">
    <title></title>
    <style>
    *{
        box-sizing: border-box;
    }
    body{
        background-color: #aaa;
    }
    .box{
        width: 390px;
        margin: 0 auto;
    }
    .big{
        background-color: white;
        padding: 10px;
        position: relative;
    }
    .big p{
        padding: 15px;
    }
    .overlay{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .big .overlay{
        border: 5px solid orange;
        display: none;
    }
    ul{
        margin: 0;
        padding: 0;
        width: 370px;
        list-style: none;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        background-color: white;
        margin-top: 10px;
    }
    li{
       
       width: 170px;
        position: relative;
        overflow: hidden;
    }
    li .overlay{
        background-color: black;
        opacity: 0;
    }
    li p{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: -100%;
        padding: 20px;
    }
    li p span{
        display: block;
        font-weight: hide;
    }
    </style>
</head>
<body>
     <div class="box">
         <div class="big">
             <img src="1.jpg" alt="">
             <p>在世界银行发布的《2017年全球营商环境报告》中，中国营商便利度近三年
                 在全球排名跃升18位；其中，开办企业便利度更是跃升31位。这是中央政府
                 悉心
                 打造稳定公平、可预期的营商环境、加快建设开放型经济所作的不懈努力。</p>
                 <div class="overlay"></div>
         </div>


         <ul>
             <li>
                 <img src="2.jpg" alt="">
                 <p><span>在世界银行发布的</span>
                    加快建设开放型经济所作的不懈努力
                </p>
                <div class="overlay"></div>
             </li>
            <li>
                 <img src="3.jpg" alt="">
                 <p><span>在世界银行发布的</span>
                    加快建设开放型经济所作的不懈努力
                </p>
                <div class="overlay"></div>
             </li>
         </ul>
     </div>

    <script src="./jquery.js"></script>
</body>
</html>
<script>
    $('.big').hover(function(){
       $(this).find('.overlay').stop().fadeIn(500);
    },function(){
          $(this).find('.overlay').stop().fadeOut(500); 
    })

    $('li').hover(function(){
        $(this).find('.overlay').stop().fadeTo(500,0.5)
        $(this).find('p').stop().animate({left:0},500)
    },function(){
        $(this).find('.overlay').stop().fadeTo(500,0)
        $(this).find('p').stop().animate({left:-170},500)
    })
</script>